<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>slide-pc</title>
    <style>
        body{
            padding: 100px;
        }
        .con{
            width: 700px;
            height: 500px;
        }
        .slideout{
            width: 100%;
            height: 100%;
            overflow: hidden;
            animation: slide var(--interval) linear infinite;
            position: relative;
        }
        .slideout:hover{
            animation-play-state: paused;
            cursor: pointer;
        }
        .slidec{
            --n: calc(var(--num) + 2);
            width: calc(100% * var(--n));
            height: 100%;
            position: absolute;
            display: flex;
            transform: translate3d(calc(var(--cur) * (100%/var(--n)) * -1), 0, 0);
            transition: transform linear var(--dur, .3s);
            background: #416A7F;
        }
        .slide-item{
            width: 100%;
            height: 100%;
            background: none no-repeat center/contain;
        }
        @keyframes slide {
            100% {
                transform: translateZ(.1px);
            }
        }
        .slide-dotc{
            width: 100px;
            height: 27px;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(255, 255, 255, .1);
            border-radius: 10px;
            list-style: none;
            padding: 0 15px;
            display: flex;
            box-sizing: border-box;
        }
        .slide-dot{
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .slide-dot::after{
            content: '';
            display: inline-block;
            width: 8px;
            height: 8px;
            background: #fff;
            border-radius: 50%;
        }
        .slide-dot.cur::after{
            background: #ff5000;
        }
        .slide-btn{
            background: rgba(0, 0, 0, .8);
            color: #fff;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            height: 20px;
        }
        .slide-btn{
            display: inline-block;
            width: 25px;
            height: 35px;
            background: rgba(0, 0, 0, .8) url("data:image/svg+xml,%3Csvg class='icon' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath d='M719.2 912.6c14.2-14.2 14.2-37.2 0-51.4L371.7 513.8c-2.8-2.9-2.8-7.5 0-10.3L719.2 156c14.2-14.2 14.2-37.2 0-51.4-14.2-14.2-37.2-14.2-51.4 0L320.3 452c-15.6 15.6-23.4 36-23.4 56.5s7.8 41 23.4 56.5l347.4 347.4c14.3 14.3 37.3 14.3 51.5.2z' fill='%23fff'/%3E%3C/svg%3E") center/100% 100% no-repeat;
        }
        .pre,.next{
            border-radius: 0 5px 5px 0;
        }
        .pre{
            left: 0;
        }
        .next{
            right: 0;
            transform: translateY(-50%) rotate(180deg);
        }
    </style>
</head>
<body>
    <div class="con">
        <div class="slideout">
            <div class="slidec">
            </div>
            <a class="pre slide-btn"></a>
            <a class="next slide-btn"></a>
            <ul class="slide-dotc">
            </ul>
        </div>
    </div>
    <script>
        class slide{
            constructor(urls){
                this.out = document.querySelector('.slideout');
                this.con = document.querySelector('.slidec');
                this.dotc = document.querySelector('.slide-dotc');
                this.urls = urls;
                this.num = urls.length;

                this.init();
            }
            init(){
                let urls = this.urls;
                let dotTpl = urls.map((t,i) => {
                    return `<li i="${i}" class="slide-dot"></li>`
                }).join('');
                this.dotc.innerHTML = dotTpl;

                urls = [urls[this.num-1], ...urls, urls[0]];
                let slideTpl = urls.map((t,i) => {
                    let slideItemCls = i < 1 ? 'slide-item cur' : 'slide-item';
                    return `<a style="background-image: url(${t})" href="javascript:;" i="${i}" class="${slideItemCls}" class="slide-link"></a>`
                }).join('');
                this.con.innerHTML = slideTpl;

                this.out.style.setProperty('--num', this.num);
                this.out.style.setProperty('--interval', '3s');
                this.setCur(1);

                this.out.addEventListener("animationiteration", () => {
                    this.changeCur(true);
                });

                let pre = document.querySelector('.pre');
                let next = document.querySelector('.next');
                pre.addEventListener('click', e => {
                    this.changeCur(false);
                })
                next.addEventListener('click', e => {
                    this.changeCur(true);
                })

                this.dotc.addEventListener('click', e => {
                    let i = e.target.getAttribute('i');
                    if(i){
                        this.setCur(+i+1);
                    }
                })
            }
            setCur(cur){
                this.out.style.setProperty('--cur', cur);

                this.con.querySelector('.cur')?.classList.remove('cur');
                this.con.children[cur-1]?.classList.add('cur');
                this.dotc.querySelector('.cur')?.classList.remove('cur');
                this.dotc.children[cur-1]?.classList.add('cur');
            }
            changeCur(add){
                //切换cur方法
                let cur = this.out.style.getPropertyValue('--cur');
                cur = parseInt(cur);

                if(add){
                   if (cur === this.num) {
                        this.out.style.setProperty('--dur','0s');
                        this.setCur(0);
                        this.out.offsetWidth;
                        this.out.style.setProperty('--dur','.3s');
                        this.setCur(1);
                    } 
                    else {
                        this.setCur(cur + 1);
                    }
                }
                else{
                    if (cur === 1) {
                        this.out.style.setProperty('--dur','0s');
                        this.setCur(this.num + 1);
                        this.out.offsetWidth;
                        this.out.style.setProperty('--dur','.3s');
                        this.setCur(this.num);
                    } 
                    else {
                        this.setCur(cur - 1);
                    }
                }
            }
        }

        let urls = [
            "https://img.alicdn.com/imgextra/i1/6000000004995/O1CN01C6bfox1mllHPXxQnO_!!6000000004995-0-octopus.jpg",
            "https://img.alicdn.com/imgextra/i4/O1CN01GOlEEW1zidUliI8O7_!!6000000006748-2-tps-846-472.png",
            "https://img.alicdn.com/imgextra/i4/O1CN01LHWdyp1yvAidcNMDR_!!6000000006640-0-tps-846-472.jpg",
            "https://img.alicdn.com/imgextra/i4/O1CN01aTXsri1my7yg4CMpt_!!6000000005022-0-tps-846-472.jpg",
        ];

        new slide(urls);
    </script>
</body>
</html>

